<include file="header" />
<div id="content"  class="content">
    <menu id="publicmenu">
        <div class="pure-menu pure-menu-open">
            <ul>
                <li>
                    <a href="{:U('w3g/Public/home')}">
                        <div class="sidebar-ico sidebar-home"></div>
                        <div>广场</div>
                    </a>
                </li>
                <li>
                    <a href="{:U('w3g/Public/login')}">
                        <div class="sidebar-ico sidebar-login"></div>
                        <div>登录</div>
                    </a>
                </li>
                <li class="pure-menu-selected">
                    <a href="{:U('w3g/Public/register')}">
                        <div class="sidebar-ico sidebar-register"></div>
                        <div>注册帐号</div>
                    </a>
                </li>
                <li>
                    <a href="{:U('w3g/Public/about')}">
                        <div class="sidebar-ico sidebar-about"></div>
                        <div>关于我们</div>
                    </a>
                </li>
            </ul>
        </div>
    </menu>
    <div id="register" class="panel pure-form pure-form-stacked ts-padding20" selected="true" data-footer="none" data-menu="publicmenu">
        <!--div id="register-type-toggle" class="pure-g">
            <div class="pure-u-1-2 text-center toggleregistertype" data-container="#register-by-mail" data-barleft="0">邮箱注册</div>
            <div class="pure-u-1-2 text-center toggleregistertype" data-container="#register-by-phone" data-barleft="50%">手机注册</div>
            <div class="pure-u-1-2 ani" id="register-type-bar"></div>
        </div-->
        <!--div id="register-by-mail" class="register-type-item">
            <form class="pure-form">
                <fieldset class="pure-group">
                    <input id="email" type="email" name="mail" class="pure-input-1" placeholder="邮箱" autocomplete="off"/>
                    <input id="uname" type="text" name="nickname" class="pure-input-1" placeholder="昵称为2-10位，支持中英文、数字、下划线" autocomplete="off"/>
                    <input id="pwd" type="password" name="pwd" class="pure-input-1"  placeholder="密码为6-15位，字母、数字、符号组成" style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;" autocomplete="off"/>
                </fieldset>
                <fieldset class="pure-group" style="margin-top: -1.4em;position: relative;">
                    <input id="pwd-repeat" type="password" name="pwd-repeat" class="pure-input-1"  placeholder="确认密码" style="border-top-left-radius: 0;border-top-right-radius: 0;"/>
                    <input id="auth-code" type="text" name="auth-code" class="pure-input-1"  placeholder="验证码"/>
                    <img style="position:absolute;bottom:25px;right:8px;z-index:10;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;" src="__ROOT__/public/captcha.php" id="verifyimg" class="alM" onclick="change_verify()" />
                </fieldset>
            </form-->
            <!--p>
                我已阅读并同意
                <a href="{:U('w3g/Public/protocol')}" style="color: #0097E3;text-decoration: none;">用户服务协议</a>
            </p>
            <div class="pure-g">
                <input id="register-mail-submit" type="submit" value="注册" class="pure-u-1 pure-button pure-button-primary ts-listen" data-listen="weibo-register-doregister" data-ignore="true"/>
            </div>
        </div-->
        <div id="register-by-phone" class="register-type-item">
            <form class="pure-form" autocomplete="off">
                <fieldset class="pure-group">
                    <input id="phone" type="text" name="mail" class="pure-input-1" placeholder="手机号码"/>
                    <input id="username" type="text" name="nickname" class="pure-input-1" placeholder="昵称为2-10位，支持中英文、数字、下划线" autocomplete="off"/>
                    <input id="password" type="password" name="pwd" class="pure-input-1"  placeholder="密码为6-15位，字母、数字、符号组成" style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;" autocomplete="off"/>
                </fieldset>
                <fieldset class="pure-group" style="margin-top: -1.4em;position: relative;">
                    <input id="password-repeat" type="password" name="pwd-repeat" class="pure-input-1"  placeholder="确认密码" style="border-top-left-radius: 0;border-top-right-radius: 0;"/>
                    <img id="image-code-button" src="__ROOT__/public/captcha.php" data-url="__ROOT__/public/captcha.php?time=%d" style="position: absolute;bottom: 4rem;z-index: 5;right: .1rem;" />
                    <input id="img-code" type="text" name="auth-code" class="pure-input-1"  placeholder="图形验证码"/>
                    <button id="getauthcode-phone" type="button" class="pure-button pure-button-gray" onclick="regMsg()"><span>获取验证码</span></button>
                    <input id="phone-auth-code" type="text" name="auth-code" class="pure-input-1"  placeholder="验证码"/>
                </fieldset>
                <div class="txt-info" id="reg_msg_tip" style="display:none;">验证码已发送到您的手机，30分钟内输入有效，请勿泄露。</div>
            </form>
            <script type="text/javascript">
              $('#image-code-button').on('click', function(event) {
                event.preventDefault();
                var time = (new Date()).getTime()
                var src  = $(this).data('url').replace(/\%d/ig, time);
                $(this).attr('src', src);
              });
            </script>
            <!-- <p>
                我已阅读并同意
                <a href="{:U('w3g/Public/protocol')}" style="color: #0097E3;text-decoration: none;">用户服务协议</a>
            </p> -->
            <div class="pure-g">
                <input id="register-phone-submit" type="submit" value="注册" class="pure-u-1 pure-button pure-button-primary ts-listen" data-listen="weibo-register-doregister" data-ignore="true"/>
            </div>
        </div>
        <script>
            $(function(){
                $('#register-by-phone').show();
            });
            var change_verify = function() {
                var date = new Date();
                var ttime = date.getTime();
                var url = SITE_URL+'/public/captcha.php';
                $('#verifyimg').attr('src',url+'?'+ttime);
            };
            var lock = 0;
            var timefun = '';
            var timenum = 0;            
            var regMsg = function () {
                var phone = $('#phone').val();
                var img_code = $('#img-code').val();
                if (phone === '') {
                    //ui.error('手机号不能为空');
                    $.ui.showMask("手机号不能为空",true);
                    return false;
                }
                if( !(/^[1][358]\d{9}$/.test(phone)) ){
                    $.ui.showMask("请填写正确的11位手机号",true);
                    return false;
                }
                if (img_code === '') {
                    //ui.error('手机号不能为空');
                    $.ui.showMask("图形验证码不能为空",true);
                    $("#img_code").focus();
                    return false;
                }
                if (lock == 1) {
                    return false;
                } else {
                    timenum = 60;
                    clearInterval(timefun);
                    lock = 1;
                }
                $.post(U('public/Register/sendReigterCode'), {phone:phone,verify:img_code}, function(res) {
                    if (res.status == 0) {
                        lock = 0;
                        $('#getauthcode-phone').attr('disabled', false);
                         $.ui.showMask(res.data, true);
                        //ui.error(res.data);
                    } else {
                        $('#getauthcode-phone').attr('disabled', true);
                        $('#reg_msg_tip').show();
                        timefun = setInterval(timeout, 1000);
                        //ui.success('短信发送成功，请耐心等待');
                        $.ui.showMask('短信发送成功，请耐心等待', true);
                    }
                },'json');
            };
            var timeout = function() {
                timenum -= 1;
                if (timenum < 0) {
                    clearInterval(timefun);
                    timefun = '';
                    lock = 0;
                    $('#reg_msg_tip').hide();
                    $('#getauthcode-phone').find('span').text('获取验证码');
                    $('#getauthcode-phone').attr('disabled', false);
                    return;
                }
                $('#getauthcode-phone').find('span').text('('+timenum+')获取验证码');
            };
        </script>
    </div>
<include file="footer_public" />